<!--
元素在页面中显示或隐藏
    display
        - none。隐藏，不再保留空间（只是隐藏，不是删除，因为在DOM树中还能找到）
        - block。两个功能：显示、转为块级元素

    visibility
        - hidden。隐藏，仍保留空间
        - visible。显示
        - collapse。表格相关的，折叠、合并。

    overflow
        - 给父容器添加
        - 针对溢出部分的操作，通常适用于盒中盒嵌套、盒子内容过多的场景
        - auto。只有溢出时，才显示滚动条。
        - scroll。无论溢出与否，都会显示滚动条。
        - hidden。溢出部分直接隐藏。
        - visible。默认的，溢出部分直接暴露。
拓展
    1）未设置overflow属性时，相当于设置了默认的【overflow:visible;】
    2）某些有定位的元素，应该故意暴露出来，例如：热门、火爆、精品...这些固定在盒子边边角角上的
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .one {
        /* display: none; */
        visibility: collapse;
        width: 100px;
        height: 100px;
        background-color: orange;
    }
    .two {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    .out {
        /* 给父容器添加 */
        overflow: hidden;
        width: 300px;
        height: 300px;
        margin-top: 10px;
        background-color: blue;
    }
    .in {
        /* 宽度溢出父容器外：500>300 */
        width: 500px;
        height: 200px;
        background-color: orangered;
    }
</style>

<div class="one">one</div>
<div class="two">two</div>

<div class="out">
    <div class="in"></div>
</div>
